import React, { Component } from 'react';
import { Modal, Button, Spin, Form, Input } from 'antd';
import Wang from '../../component/allWang';
const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 20 }, };
class RichText extends Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            pageLoading: false,
            richText: [],
            editorInfo: ''
        }
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({ pageLoading: true })
        }, 1000);
    }
    // 修改内容
    updataInfo = () => {
        this.setState({ visible: true })
    }
    handleCancel = () => {
        this.setState({ visible: false })
    }
    // 监听富文本内容改变
    richText = (item) => {
        this.setState({ editorInfo: item })
    }
    handleOk = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log(values)
            }
        });
    }
    /* 页面this.setstate 警告处理 */
    componentWillUnmount = () => {
        this.setState = (state,callback)=>{
            return;
        };
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className='rich-text apppageall'>
                <div className={this.state.pageLoading ? 'displaynone' : 'page-loads flexct'}><Spin tip="页面数据正在加载..."></Spin></div>
                <div style={{ padding: '20px' }}>
                    富文本使用的是wang ,轻量型的。
                </div>
                <Button type="primary" onClick={this.updataInfo.bind(this, this.state.richText)}>修改信息</Button>
                <Modal width='700px' title="新增内容" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} destroyOnClose='true'>
                    <Form {...formItemLayout} onSubmit={this.handleOk}>
                        <Form.Item label="标题">
                            {getFieldDecorator('head', { initialValue: this.state.richText.head, rules: [{ required: true, min: 6, max: 40, message: '仅支持中英文和数字，长度为5-20' }], })(
                                <Input size='large' />)}
                        </Form.Item>
                    </Form>
                    {this.state.visible&&
                        <Wang GetRichText={this.richText} propsInfo={this.state.richText}></Wang>
                    }
                </Modal>
            </div>
        );
    }
}
const RichTextFrom = Form.create({ name: 'frominfo' })(RichText);
export default RichTextFrom;